<!-- Aside.vue -->
<template>

   <n-layout has-sider >
      <!-- 侧边目录 -->
      <div class="aside" >
        <n-layout-sider
          bordered
          collapse-mode="width"
          :width="90"
          style="background-color: #e8e8e8;"
        >
          <n-menu
            v-model:value="activeKey"
            :options="menuOptions"
            class="menu"
            @update:value="handleMenuClick"
          />
        </n-layout-sider>
      </div>
    <n-layout>
      <n-layout-content>
        <n-layout>
          <n-config-provider>
            <n-message-provider>
              <router-view></router-view>
            </n-message-provider>
          </n-config-provider>
      </n-layout>
      </n-layout-content>
    </n-layout>
  </n-layout>

</template> 

<script setup lang="ts" name="Layout">
import {
  BookOutline as BookIcon,
} from '@vicons/ionicons5'
import { NIcon } from 'naive-ui'
import { h,ref } from 'vue'
import { useRouter } from 'vue-router'

// 渲染图标的帮助函数
const renderIcon = (icon:any) => {
  return () => h(NIcon, null, { default: () => h(icon) })
}



// 菜单项数据
const menuOptions = [
  {
    label: '接口管理',
    key: 'interface-manage',
    to:'/',
    icon: renderIcon(BookIcon)
  },
  {
    label: '自动化测试',
    key: 'auto-test',
    to:'/auto-test',
    icon: renderIcon(BookIcon)
  },
  {
    label: '分享文档',
    key: 'share-document',
    to:'/share-file',
    icon: renderIcon(BookIcon)
  },
  {
    label: '请求历史',
    key: 'request-history',
    to:'/req-history',
    icon: renderIcon(BookIcon)
  },
  {
    label: '项目设置',
    key: 'project-setting',
    to:'/setting',
    icon: renderIcon(BookIcon)
  }
]

const activeKey = ref('interface-manage')

const router=useRouter()
//点击菜单跳转路由
const handleMenuClick=(key:string)=>{
  const route=menuOptions.find(item=>item.key===key) //将选择的菜单项的数据赋值给route
  if(route && route.to){
    router.push(route.to)
  }
}


</script>

<style scoped>
  .aside {
    background-color: #e8e8e8;
    position: fixed;
    top:0;
    bottom:0;
    left:0;
  }
  :deep(.n-menu-item-content) {
    display:flex !important;
    flex-direction: column !important;
    margin-top: 30px;
    padding-left: 18px !important;
    font-size: 12px;
  }
  #app{
    /* max-width: 1280px; */
    margin: 0 auto ;
    /* padding: 2rem; */
    text-align: center ;
    margin-left: 80px;
  }

</style>